<template>
  <div class="contain-edit">
    <div class="header">
      <p>房源管理/编辑房源</p>
      <el-button class="link" type="primary">
        <router-link to="/houseList" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <el-form :model="information" :rules="rules" ref="information" label-width="120px" class="">
        <el-form-item label="小区：" prop="gardenName">
          <el-input v-model="information.gardenName" placeholder="请输入"></el-input>

          <!--<el-select v-model="information.gardenName" placeholder="请选择" @change="handleChangeArea">-->
            <!--<el-option-->
              <!--v-for="item in buildingList"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value">-->
            <!--</el-option>-->
          <!--</el-select>-->
        </el-form-item>
        <el-form-item label="单元：" prop="unitName">
          <el-input v-model="information.unitName" placeholder="请输入"></el-input>

          <!--<el-select v-model="information.unitName" placeholder="请选择" @change="handleChangeUnit">-->
            <!--<el-option-->
              <!--v-for="item in unitList"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value">-->
            <!--</el-option>-->
          <!--</el-select>-->
        </el-form-item>
        <el-form-item label="楼栋：" prop="buildName">
          <el-input v-model="information.buildName" placeholder="请输入"></el-input>

          <!--<el-select v-model="information.buildName" placeholder="请选择">-->
            <!--<el-option-->
              <!--v-for="item in buildList"-->
              <!--:key="item.value"-->
              <!--:label="item.label"-->
              <!--:value="item.value">-->
            <!--</el-option>-->
          <!--</el-select>-->
        </el-form-item>
        <el-form-item label="楼层：" prop="floornum">
          <el-input v-model.number="information.floornum" placeholder="请输入楼层的层数"></el-input> 层
        </el-form-item>
        <el-form-item label="房间：" prop="roomnum">
          <el-input v-model.number="information.roomnum" placeholder="请输入房间的间数"></el-input> 间
        </el-form-item>
        <el-form-item label="地址：" prop="address">
          <el-input v-model="information.address" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('information')"  :loading="loading">保存</el-button>
          <el-button @click="$router.push('/houseList')">返回</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");
  import $ from 'jquery'
  import $axios from 'axios'
  export default {
    data() {
      return {
        id:null,
        checked: true,
        information:{
          gardenName: "",
          unitName: "",
          buildName: "",
          floornum: "",
          roomnum: "",
          address: ""
        },
        rules: {
          gardenName: [
            { required: true, message: '请选择小区', trigger: 'blur' },
          ],
          unitName: [
            { required: true, message: '请选择单元', trigger: 'blur' },
          ],
          buildName: [
            { required: true, message: '请选择楼栋', trigger: 'blur' },
          ],
          address: [
            { required: true, message: '请输入地址', trigger: 'blur' },
          ],
          roomnum: [
            { required: true, message: '请输入房间的间数', trigger: 'blur' },
            { type: 'number', message: '房间的间数必须为数字值'}
          ],
          floornum: [
            { required: true, message: '请输入楼层的层数', trigger: 'blur' },
            { type: 'number', message: '楼层的层数必须为数字值'}
          ],
        },
        loading: false,
        buildingList: [],
        unitList: [],
        buildList: [],
        identify: "",

      };
    },
    components:{
      'bg-editor':()=>import('../common/bg-editor.vue')
    },
    mounted() {
      this.identify = sessionStorage.getItem("identify");
      this.id  = this.$router.currentRoute.query.id;
      this.getGardenList()
      if(this.id){
        this.getDetail();
      }
    },
    methods: {
      getGardenList() {
        let url = CONSTANT.URL.L_HOUSE.L_GARDEN;
        common.requestAjax(url, {}, {}, (data) => {
          if (data.status ==200) {
            data.data.bussData.map( item => {
              this.buildingList.push({
                label: item,
                value: item
              })
            })
          }
        })
      },
      getUnitList() {
        let url = CONSTANT.URL.L_HOUSE.L_UNIT;
        this.unitList = []
        common.requestAjax(url, {}, {gardenName: this.information.gardenName}, (data) => {
          if (data.status ==200) {
            data.data.bussData.map( item => {
              this.unitList.push({
                label: item,
                value: item
              })
            })
          }
        })
      },
      getBuildingList() {
        let url = CONSTANT.URL.L_HOUSE.L_BUILD;
        this.buildList = []
        common.requestAjax(url, {}, {unitName: this.information.unitName}, (data) => {
          if (data.status ==200) {
            data.data.bussData.map( item => {
              this.buildList.push({
                label: item,
                value: item
              })
            })
          }
        })
      },
      getDetail(){
        let url = this.identify == 1 ? CONSTANT.URL.HOUSE.DETAIL : CONSTANT.URL.L_HOUSE.DETAIL;

      },
      getBuildingDetail(id) {
        let url = CONSTANT.URL.L_BUILDING.DETAIL;
        common.requestAjax(url, {}, {id: id}, (result) => {
          if (result.status == 200) {
            this.unitId = result.data.bussData.parent.id;
            this.areaId = result.data.bussData.parent.parent.id

            this.getBuildList(this.unitId, (data) => {
              data.map( item => {
                this.buildList.push({
                  label: item.name,
                  value: item.id
                })
              })
            })
            this.getBuildList(this.areaId, (data) => {
              data.map( item => {
                this.unitList.push({
                  label: item.name,
                  value: item.id
                })
              })
            })
          }
        })
      },

      submitForm(formName) {

        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true;
//            if(this.id){
//              var url = this.identify == 1 ? CONSTANT.URL.HOUSE.UPDATE : CONSTANT.URL.L_HOUSE.UPDATE;
//            }else{
              var url = this.identify == 1 ? CONSTANT.URL.HOUSE.ADD : CONSTANT.URL.L_HOUSE.ADDS;
//            }
            common.requestAjax(url, {}, {...this.information}, res => {
              if(res.status == 200) {
                this.$message({
                  type: 'success',
                  message: '保存成功!'
                });
                this.loading = false;
                this.$router.push("/houseList");
              } else {
                this.$message({
                  type: 'error',
                  message: res.msg
                });
                this.loading = false;
              }
            });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      handleChangeArea() {
        this.information.unitName = "";
        this.information.buildName = "";
        this.getUnitList()
      },
      handleChangeUnit() {
        this.information.buildName = "";
        this.getBuildingList()
      },
    }
  }
</script>

<style lang="scss" scoped >
  @import '/static/bootstrap.css';
  @import '/sys/static/bootstrap.css';
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  ul, li {
    list-style: none;
  }
  .house-allocate {
    li {
      margin-bottom: 20px;
      span {
        width: 60px;
        display: inline-block;
      }
    }
  }
  .el-form-item__content{
    margin-left: 0;
  }
  .avatar-uploader {
    border-radius: 6px;
    box-sizing: border-box;
    vertical-align: top;
    .el-upload {
      cursor: pointer;
      position: relative;
      overflow: hidden;
      .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
        border: 1px dashed #d9d9d9 !important;
        border-radius: 6px;
        margin-left: 6px;
      }
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }
    }
    .el-upload:hover {
      border-color: #20a0ff;
    }
  }
</style>
